<template>
  <el-container class="app-container" direction="vertical">
    <el-card class="header-card" shadow="hover" style="background:#373f61;padding:1vh 2vw">
      <el-container class="header-container" direction="vertical">
        <el-container>
          <i class="el-icon-collection-tag">活动详情</i>
        </el-container>
        <el-container class="app-container_container" direction="horizontal" style="margin-top: 1rem;margin-bottom: 50px;display: flex;justify-content: center">
          <img :src="activity.firstImage" style="margin-left:5%;margin-right:5%;max-width:300px;object-fit: cover;" alt/>
          <el-container direction="vertical">
            <h1 style="color: white;font-size: 1.7rem;letter-spacing: 3px;font-weight: 600">{{ activity.title }}</h1>
            <el-container>
              <el-tag type="danger">{{ activity.type }}</el-tag>
            </el-container>
            <el-container direction="horizontal" style="color: white;margin-top: 10px">
              <i class="el-icon-time" />
              <span style="margin-left: 5px">{{ activity.activityStart }} ~ {{ activity.activityEnd }}</span>
            </el-container>
            <el-container direction="horizontal" style="color: white;margin-top: 10px">
              <i class="el-icon-location-outline" />
              <span style="margin-left: 5px">{{ activity.zone }}</span>
            </el-container>
            <el-container direction="horizontal" style="color: white;margin-top: 10px">
              <i class="el-icon-user" />
              <span style="margin-left: 5px">已报名 {{ enrollData }}</span>
            </el-container>
            <el-container direction="horizontal" style="margin-top: 20px">
              <el-button type="primary" size="medium" style="width: 240px;height: 65px;font-size: 20px" @click="handleEnroll()" :disabled="signButtonEnable">
                {{ signButtonWrapper }}
              </el-button>
              <el-button size="medium" style="width: 120px;height: 65px;font-size: 20px;margin-left: 50px" @click="handleFeedback()">反馈</el-button>
            </el-container>
          </el-container>
        </el-container>
      </el-container>
    </el-card>

    <el-card shadow="hover" class="medium-card" style="margin:1rem 0;">
      <el-row style="margin:1rem 2rem">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="font-size: 1.2rem">主办方: {{ author }}</el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="font-size: 1.2rem">报名时间:
          {{ activity.enrollStart }} ~ {{ activity.enrollEnd }}
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="hover" class="footer-card">
      <el-row >
        <h1 style="margin:1rem 2rem;letter-spacing: 2px;font-size: 1.7rem">活动介绍</h1>
        <el-row style="margin:1rem 2rem">{{ activity.content }}</el-row>
      </el-row>
    </el-card>
  </el-container>
</template>

<script>
import { enroll, itemActivity } from '@/api/user/activity'
import { itemAdmin } from '@/api/admin/admin'
import { indexActivityUser } from '@/api/base/activityUser'

export default {
  data() {
    return {
      activity: [],
      author: '',
      enrollData: 0,
      item: {
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      },
      signWrapper: '',
      signButtonWrapper: '立即报名',
      signButtonEnable: false,
    }
  },
  created() {
    // 从服务器端获取 活动列表
    this.getActivity()
    // this.getAdmin()
    // this.getEnroll()
  },
  methods: {
    // 获取活动数据
    async getActivity() {
      const resActivity = await itemActivity({id: this.$route.query.id})
      this.activity = resActivity.data
      const resAdmin = await itemAdmin({id: this.activity.number})
      this.author = resAdmin.data.name
      const resActivityUser = await indexActivityUser({ activity_id: this.$route.query.id, status: 0})
      this.enrollData = resActivityUser.data.total
    },
    // 根据管理员id 获取管理员姓名
    // async getAdmin() {
    //   const res = await itemAdmin({id: 1})
    //   this.author = res.data.name
    // },
    // 获取报名人数
    // async getEnroll() {
    //   const res = await indexActivityUser({status: 0, activityId: this.activity.id})
    //   this.enroll = res.data.total
    // },
    // 报名活动
    handleEnroll() {
      enroll().then(() => {
        this.$notify({
          title: '成功',
          message: '报名成功',
          type: 'success',
          duration: 2000
        })
      }).catch(err=>{
        console.log(err,'err')
        this.$notify({
          title: '失败',
          message: '报名失败',
          type: 'danger',
          duration: 2000
        })
        }
      )
    },
    // 活动反馈
    handleFeedback() {
      this.$router.push({
        path: '/feedback/send',
        query: {
          id: this.$route.query.id
        }
      })
    },
    // 获取剩余名额
    // getSignData() {
    //   const res =  getActivityUser({userId: this.$store.state.user.id})
    //   if (res.data.data.status !== 0 || res.data !== '') {
    //     this.signWrapper = '已报名'
    //     this.signButtonEnable = true
    //   }
    // }
  }
}
</script>

<style scoped lang="scss">
.app-container_container{
  @media only screen and (min-width: 768px) {
    flex-direction:row
  }
  @media only screen and (max-width: 768px) {
    flex-direction:column
  }
}
.app-container{

  .header-container{
    background: #373f61;
  }

  .el-icon-collection-tag {
    font-family: "微软雅黑 Light", serif;
    font-size: 18px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: white;
  }

  .medium-card {
    //margin: 40px 2rem;
    //font-size: 18px;
    font-size: 1.2rem;
    font-family: 楷体,serif;
    //font-family: "微软雅黑 Light",serif;
    //box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }

  .footer-card {
    font-size: 1.2rem;
    font-family: 楷体,serif;
  }
}
</style>
